在完成了 Mockup 與核心流程圖（Happy Path）後，接下來就要正式進入切版實作階段，我們將運用 Bootstrap 5 的元件與網格系統進行畫面切版以及響應式佈局。

1.載入 Bootstrap 5 CDN

要使用 Bootstrap 5，最快速的方式是在 HTML 中直接引入 CDN：

• CSS 樣式：放至 <head>標籤內。

<link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

• JavaScript 模組：因為之後會使用到 Modal、Toast 與 Tab 等互動元件，所以我們也需要載入JavaScript模組，將它放置於 </body> 結束標籤前。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
  crossorigin="anonymous"
></script>

(參考資料：Bootstrap 5 Introduction)

2.運用 Grid System 打造響應式佈局

為了在單一頁面能順暢切換多功能頁面，我們先用 Grid System（網格系統） 來分配側邊選單與主要內容區，之後再搭配 navs and tabs 進行切換。

Bootstrap 網格核心觀念：

• 欄位 (Columns)：總數固定為 12 欄。

• 間距 (Gutter)：預設為 1.5rem（即 16px x 1.5 = 24px）。

• Mobile First (行動優先)：Bootstrap 預設樣式優先套用到手機端，再透過斷點（Breakpoints）擴充更大尺寸。

斷點設定與佈局規劃：

根據設計稿需求：

• 小螢幕/手機版：側邊選單與內容區皆為滿版（12 欄，這是預設，所以可以省略不寫）。

• 中大螢幕 (≥ 768px)：左側 Tab 選單佔 3 欄 (col-md-3)，右側內容區佔 9 欄 (col-md-9)。

Bootstrap的主要斷點尺寸參考：

(參考資料：Bootstrap 5 Grid System)

網格骨架實作

我們可以先在 div 加上 .border 輔助框線，方便在瀏覽器確認是否成功依據斷點切分比例：

<div class="container my-4">
  <div class="row">
    <!-- 左側選單：手機版 100%、md 以上佔 3 欄 -->
    <div class="col-md-3 mb-3">
      <div class="border p-3">Tab 選單區</div>
    </div>
    
    <!-- 右側內容：手機版 100%、md 以上佔 9 欄 -->
    <div class="col-md-9">
      <div class="border p-3">選單內容區</div>
    </div>
  </div>
</div>

[介面呈現]

小結

透過 Bootstrap 5 的 Grid System，成功建立了一套在手機端為滿版、在中大螢幕（≥ 768px）自動切分為 3:9 比例的響應式骨架。

建立了劃分區域的骨架後，接下來將在這個骨架上套用 Navs & Tabs 元件，實現免刷新頁面（SPA 體驗）的視圖切換功能。